<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Free HTML5 Template by FreeHTML5.co"/>
    <meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive"/>
    <meta name="author" content="FreeHTML5.co"/>

    <!--
      //////////////////////////////////////////////////////

      FREE HTML5 TEMPLATE
      DESIGNED & DEVELOPED by FreeHTML5.co

      Website: 		http://freehtml5.co/
      Email: 			info@freehtml5.co
      Twitter: 		http://twitter.com/fh5co
      Facebook: 		https://www.facebook.com/fh5co

      //////////////////////////////////////////////////////
       -->

    <!-- Facebook and Twitter integration -->
    <meta property="og:title" content=""/>
    <meta property="og:image" content=""/>
    <meta property="og:url" content=""/>
    <meta property="og:site_name" content=""/>
    <meta property="og:description" content=""/>
    <meta name="twitter:title" content=""/>
    <meta name="twitter:image" content=""/>
    <meta name="twitter:url" content=""/>
    <meta name="twitter:card" content=""/>

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>

    {#    <link rel="stylesheet" href="/static/index/css/bootstrap.min.css">#}
    <link rel="stylesheet" href="/static/register/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/register/css/animate.css">
    {#    <link rel="stylesheet" href="{% static '/register/css/animate.css' %}">#}
    {#    <link rel="stylesheet" href="{% static '/register/css/style.css' %}">#}
    <link rel="stylesheet" href="/static/register/css/style.css">

    <!-- Modernizr JS -->
    <script src="/static/register/js/modernizr-2.6.2.min.js"></script>
    {#    <script src="{% static '/register/js/modernizr-2.6.2.min.js' %}"></script>#}
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <ul class="menu">
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">


            <!-- Start Sign In Form -->
            <form action="#" class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <h2>注　册</h2>
                <div class="form-group">
                    <label for="name" class="sr-only">Name</label>
                    <input type="text" class="form-control" id="name" placeholder="用户名" name="name" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="密码" name="password"
                           autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="re-password" class="sr-only">Phone</label>
                    <input type="text" class="form-control" id="phone" placeholder="手机号" name="phone"
                           autocomplete="off">
                </div>
{#                <div class="form_group">#}
{#                    <img src="/member/image_code" class="get_pic_code" id="captcha_img" onclick="generateImageCode()">#}
{#                    <input type="text" name="code_pwd" id="imagecode" class="code_pwd">#}
{#                    <div class="input_tip">图形验证码</div>#}
{#                </div>#}
{#                <div class="form_group">#}
{#                    <input type="text" name="smscode" id="smscode" class="code_pwd">#}
{#                    <div class="input_tip">手机验证码#}
{#                        <a href="javascript:;" class="get_code" onclick="sendSMSCode()">点击获取验证码</a>#}
{#                    </div>#}
{#                </div>#}
                <div class="form-group">
                    <label for="remember"><input type="checkbox" id="remember"> Remember Me</label>
                    <div id="register-err" class="error_tip" style="display: none; color:red; float: right;">验证码不能为空
                    </div>
                </div>
                <div class="form-group">
                    <p>已经注册? <a href="/login">登录</a></p>
                </div>
                <div class="form-group">
                    <input type="button" value="注册" id="register" class="btn btn-primary">
                </div>
            </form>
            <!-- END Sign In Form -->

        </div>
    </div>
    <div class="row" style="padding-top: 60px; clear: both;">
        <div class="col-md-12 text-center">
            <p>
                <small>&copy; All Rights Reserved. Designed by <a href="https://freehtml5.co">FreeHTML5.co</a></small>
            </p>
        </div>
    </div>
</div>

<!-- jQuery -->
<script src="/static/register/js/jquery.min.js"></script>
{#<script src="/static/register/js/jquery-1.12.4.min.js"></script>#}
<script src="/static/register/js/jquery.form.min.js"></script>
<script src="/static/register/js/jquery.pagination.min.js"></script>
<!-- Bootstrap -->
<script src="/static/register/js/bootstrap.min.js"></script>
<!-- Placeholder -->
<script src="/static/register/js/jquery.placeholder.min.js"></script>
<!-- Waypoints -->
<script src="/static/register/js/jquery.waypoints.min.js"></script>
<!-- Main JS -->
<script src="/static/register/js/main.js"></script>
<script>
    $(function () {
        //点击发送ajax请求
        $('#register').click(function () {
            username = $('#name').val();
            password = $('#password').val();
            phone = $('#phone').val();
            {#image_code = $('#imagecode').val();#}
            {#smscode = $('#smscode').val();#}
            if (!username) {
                $("#register-err").html("请填写用户名!");
                $("#register-err").show();
                return;
            }

            if (!password) {
                $('#register-err').hide();
                $("#register-err").html("请填写密码!");
                $("#register-err").show();
                return;
            }

            if (password.length < 6) {
                $("#register-err").html("密码长度不能少于6位");
                $("#register-err").show();
                return;
            }
            if (!phone) {
                $("#register-err").html("请填写手机号！");
                $("#register-err").show();
                return;
            }

            if (phone.length != 11) {
                $('#register-err').hide();
                $("#register-err").html("手机号格式错误！");
                $("#register-err").show();
                return
            }

            var myreg = /^\d{11}$/;

            if (!myreg.test(phone)) {
                $("#register-err").html("手机号格式错误！");
                $("#register-err").show();
                return
            }

            {#if (!image_code) {#}
            {#    $("#register-err").html("请填写验证码！");#}
            {#    $("#register-err").show();#}
            {#    // $(".get_code").attr("onclick", "sendSMSCode();");#}
            {#    return;#}
            {# }#}
            {#if (!smscode) {#}
            {#    $('#register-err').hide();#}
            {#    $("#register-err").html("请填写手机验证码！");#}
            {#    $("#register-err").show();#}
            {#    return;#}
            {# }#}

              var params = {
                  "username": username,
                  "password": password,
                  "phone": phone,
            };

            $.ajax({
                url: "/register_info",
                type: "post",
                contentType: "application/json",
                // 响应数据的格式
                dataType: "json",
                {#data: {#}
                {#    username: username,#}
                {#    password: password,#}
                {#    phone: phone,#}
                    {#image_code: image_code,#}
                    {#smscode: smscode#}
                {# },#}
                data: JSON.stringify(params),
                success: function (resp) {
                    if (resp.code == "0") {
                        // 刷新当前界面
                        location.href = '/login';
                    } else {
                        $("#register-err").html(resp.errmsg);
                        $("#register-err").show();
                        {#$(".get_pic_code").attr("src", "/member/image_code?id=" + Math.random())#}
                    }
                }
            })
        });
        {#$('#captcha_img').click(function () {#}
        {#    //点击验证码图片 换新的图片,如果src的值没改变 不会重新请求#}
            {#$(this).prop('src', "/member/image_code?id=" + Math.random())#}
        {#    $(".get_pic_code").attr("src", "/member/image_code?id=" + Math.random())#}
        {# })#}

    })
</script>

</body>
</html>

